import React,{useState,useRef,useEffect} from "react";
import "./common.css"
export function Tabs(props){
    let myContainer:any=useRef(null)
    let [data,setData]=useState({
        barPosition:0,
        barWidth:100,
        nowIndex:0
    })
    useEffect(()=>{
        selectBar(0)
    },[])
    function selectBar(barIndex){
        let targetTab=myContainer.current.childNodes[barIndex]
        setData({
            ...data,
            barPosition:targetTab.offsetLeft,
            barWidth:targetTab.offsetWidth,
            nowIndex:barIndex
        })
    }
    return <div className="TabContainer">
        <div className="TabLine" ref={myContainer}>
            {
                //标题位置
                props.children.map((childItem,index)=>{
                    return <div className="TabName" onClick={()=>{selectBar(index)}}>
                            {childItem.props.title}
                        </div>
                })
            }
            <div className="TabBar"
                style={{
                    left:data.barPosition+"px",
                    width:data.barWidth+"px"
                }}></div>
        </div>
        {props.children[data.nowIndex]}
        
    </div>
}